<template>
  <div class="pavilion-container">
    <div class="container-top">
      <span class="top-text-left">数字展馆</span>
      <span class="top-text-right">Digital Pavilion</span>
    </div>
    <div class="container-bottom">
      <img class="bottom-img" src="" alt="">
      <img class="bottom-img" src="" alt="">
      <img class="bottom-img" src="" alt="">
      <img class="bottom-img" src="" alt="">
      <img class="bottom-img" src="" alt="">
      <img class="bottom-img" src="" alt="">
      <img class="bottom-img" src="" alt="">
      <img class="bottom-img" src="" alt="">
      <img class="bottom-img" src="" alt="">
      <img class="bottom-img" src="" alt="">
      <img class="bottom-img" src="" alt="">
      <img class="bottom-img" src="" alt="">
      <img class="bottom-img" src="" alt="">
      <img class="bottom-img" src="" alt="">
      <img class="bottom-img" src="" alt="">
      <img class="bottom-img" src="" alt="">
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    }
  }
</script>

<style lang="scss" scoped>
  .pavilion-container{
    width: 1100px;
    margin: auto;
    padding: 24px;
    .container-top {
      font-size: 20px;
      margin-bottom: 24px;

      .top-text-left {
        color:rgba(0,0,0,0.6);
        margin-right: 20px;
        font-weight: 700;
      }
      .top-text-right {
        color:rgba(0,0,0,0.6);
        font-size: 16px;
        padding: 4px 12px;
        background-color: #ffde7d;
        border-radius: 4px;
      }
      .top-text-right::before {
        content: "/";
        margin-right: 4px;
      }
    }
    .container-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .bottom-img {
        width: 260px;
        height: 200px;
        margin: 5px 0px;
        background: red;
      }
    }
  }
</style>
